<?php
require_once "db.php";
require_once "map.php";

function event_admin_page()
{
    $plugin_folder = plugins_url() . '/disaster_plugin/';
    $input_map_id = "input_map";
?>
    <script type="text/javascript">
	var input_map_id = "<?= $input_map_id ?>";
	
        var $j = jQuery.noConflict();
        $j(function() {
            $j("#add-new-event").click( function(){
                event_add_dialog();
            });
        });
        
        function event_add_dialog()
        {
            var params = { 'action':'get_event_add_area' };
            $j("#dialog-area").load(ajaxurl, params, function() {
                $j("#dialog-area").dialog( {
                    modal: true,
                    width: 400,
                    title: "Add Event"
                });
            });
        }
        
        function event_edit_dialog(id)
        {
            var params = { 'action':'get_event_edit_area' };
            $j("#dialog-area").load(ajaxurl, params, function() {
                // fill in the data to edit

                $j("#event-name").val($j("#event-name-" + id).html());
                $j("#event-location").val($j("#event-location-" + id).html());
                $j("#event-description").val($j("#event-description-" + id).html());
                var shipping = $j("#event-shipping-address-" + id).html();
                var shipping1 = shipping.substring(0, shipping.indexOf(','));
                var shipping2 = shipping.substring(shipping.indexOf(',') + 2); //account for comma and space
                $j("#event-shipping-1").val(shipping1);
                $j("#event-shipping-2").val(shipping2);
                $j("#event-geocode").val($j("#event-geocode-"+ id).html());
                $j("#event-start-date").val($j("#event-start-date-" + id).html());
                $j("#event-start-date").datepicker("getDate");
                $j("#event-end-date").val($j("#event-end-date-" + id).html());
                $j("#event-end-date").datepicker("getDate");
                if ($j("#event-active-" + id).html() == "Yes")
                {
                    $j("#event-active").attr("checked","checked");
                }
		else
		{
		    $j(".event-end-date-row").show();
		}
		$j("#event-id").val(id);

                // set the button functions
                $j("#event-delete").click( function() {
                   event_delete(id);
                });
                $j("#event-update").click( function() {
                    event_edit();
                });

                // show the edit dialog
                $j("#dialog-area").dialog( {
                    modal: true,
                    width: 400,
                    title: "Edit Event"
                });
            });
        }

        function event_add()
        {
            var params = {
                'action':'event_add',
                'event': event_collect_data(true)
            };
            //alert(name + location + description + shipping + start_date);
            $j.post(ajaxurl, params, function () {
                refresh_events_table();
            });
            //refresh_events_table();
            $j("#dialog-area").dialog( "close" );
        }

        function event_edit()
        {
            var params = {
                'action':'event_update',
                'event': event_collect_data(false)
            };
            //alert(name + location + description + shipping + start_date);
            $j.post(ajaxurl, params, function () {
                refresh_events_table();
            });
            //refresh_events_table();
            $j("#dialog-area").dialog( "close" );
        }

        function event_collect_data(add)
        {
            var name = $j("#event-name").val();
            var location = $j("#event-location").val();
            var description = $j("#event-description").val();
            var shipping = $j("#event-shipping-1").val() + ", "
                            + $j("#event-shipping-2").val();
            var geocode = $j("#event-geocode").val();
            var start_date_raw = $j("#event-start-date").datepicker("getDate");
            var start_date = $j.datepicker.formatDate('yy-mm-dd', start_date_raw);
            var event = null;
            if (add)
            {
                event = {
                    'name':name,
                    'start_date':start_date,
                    'location':location,
                    'description':description,
                    'shipping_address':shipping,
                    'geocode':geocode
                };
            }
            else
            {
                var end_date_raw = $j("#event-end-date").datepicker("getDate");
                var end_date = $j.datepicker.formatDate('yy-mm-dd', end_date_raw);
                var active = $j("#event-active").attr('checked');
                var event_id = $j("#event-id").val();
                event = {
		    		'event_id':event_id,
                    'name':name,
                    'start_date':start_date,
                    'end_date':end_date,
                    'location':location,
                    'description':description,
                    'shipping_address':shipping,
                    'geocode':geocode,
                    'active':active
                };
            }
            return event;
        }

        function event_delete(id)
	{
            var params = {
                'action':'event_delete',
                'event_id': id
            };
            $j.post(ajaxurl, params, function() {
                refresh_events_table();
            });
            $j("#dialog-area").dialog( "close" );
        }

        function event_view(id)
        {

        }

        function refresh_events_table()
        {
            var params = { 'action':'event_list' };
            $j("#table-area").load(ajaxurl, params);
        }

    </script>
    <div class="wrap">
        <h2>
            Disaster Event Management
            <input type="button" id="add-new-event" value="Add Event" class="button" />
        </h2>
        <div id="table-area">
<?php
    generate_disaster_table();
?>
        </div>
        <div id="dialog-area" style="display: none; margin-left: auto">

        </div>
	<div id="map-input-area" style="margin-left: auto">
<?php
    map_input($input_map_id);
?>
        </div>
    </div>

<?php
}

function sub_disaster()
{
?>

    <div class="wrap">
<?php
    event_edit_view(true);
?>

    </div>

<?php
}

function event_edit_view($add)
{
    
?>
    <script type="text/javascript">
        $j(function() {
            $j("#event-start-date").datepicker();
            $j("#event-end-date").datepicker();
            $j("#event-active").click( function() {
                if ($j("#event-active").attr('checked'))
                    $j(".event-end-date-row").fadeOut();
                else
                    $j(".event-end-date-row").fadeIn();
            });
            $j("#event-add").click( function() {
                event_add();
            });
            $j("#event-update").click( function() {
                event_edit();
            });
	    $j("#event-delete").click( function() {
                event_delete($j("#event-id").val());
            });
	    $j("#event-open-map").click( function() {
                $j("#map-input-area").dialog( {
                    resizeable: false,
                    title: "Pick a Location",
		    height: 470,
		    width: 650
                });
		init_input_map();

            });
        });
    </script>
            <table class="centered">
                <tr>
                    <td class="align-right">Disaster Name:</td>
                    <td colspan="2"><input type="text" id="event-name" /></td>
                </tr>
                <tr>
                    <td class="align-right">Location:</td>
                    <td colspan="2"><input type="text" id="event-location" /></td>
                </tr>
                <tr>
                    <td class="align-right">Description:</td>
                    <td colspan="2"><input type="text" id="event-description" /></td>
                </tr>
                <tr>
                    <td class="align-right">Shipping Address:</td>
                    <td colspan="2"><input type="text" id="event-shipping-1" /></td>
                </tr>
                <tr>
                    <td class="align-right">Address Line 2: </td>
                    <td colspan="2"><input type="text" id="event-shipping-2" /></td>
                </tr>
                <tr>
                    <td class="align-right">Lat &amp; Long: </td>
                    <td><input type="text" id="event-geocode" /></td>
		    <td><div id="event-open-map" class="map-button"></div></td>
                </tr>
                <tr>
                    <td class="align-right">Start Date:</td>
                    <td colspan="2"><input type="text" id="event-start-date" value="<?php echo date("m/d/y"); ?>" /></td>
                </tr>
<?php
    if (!$add)
    {
?>
                <tr>
                    <td></td>
                    <td colspan="2"><input type="checkbox" id="event-active" /> Active</td>
                </tr>
                <tr style="height: 40px;">
                    <td class="align-right">
                        <span class="event-end-date-row" style="display: none">
                            End Date:
                        </span>
                    </td>
                    <td colspan="2">
                        <span class="event-end-date-row" style="display: none">
                            <input type="text" id="event-end-date" value="<?php echo date("m/d/y"); ?>" />
                        </span>
                    </td>
                </tr>
<?php
    }
    else
    {
?>
                <tr style="height: 25px;"><td></td><td></td></tr>
<?php
    }
?>
            </table>
<?php
    if ($add)
    {
?>
            <div class="centered" style="width: 100px; text-align: center">
                <input type="button" id="event-add" class="button-primary" value="Add Event" />
            </div>
<?php
    }
    else
    {
?>
            <table class="buttons-table centered">
                <tr>
                    <td class="left"><input type="button" id="event-delete" class="button" value="Delete" /></td>
                    <td class="right"><input type="button" id="event-update" class="button-primary" value="Update" /></td>
                    
                </tr>
            </table>
            <input type="hidden" id="event-id" />
<?php
    }
}

function generate_disaster_table()
{
    $events = db_event_list(false);

?>
            <table class="wp-list-table widefat event-list">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Description</th>
                    <th>Shipping Address</th>
                    <th>Geocode</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Active</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Description</th>
                    <th>Shipping Address</th>
                    <th>Geocode</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Active</th>
                </tr>
            </tfoot>
            <tbody>
<?php
    foreach ($events as $event)
    {
        $id = $event["event_id"];
?>
                <tr id="event-row-<?= $id ?>">
                    <td class="name-column">
                        <a href="#" class="row-title" onclick="event_view(<?= $id ?>)">
                            <span id="event-name-<?= $id ?>"><?= $event["name"] ?></span></a>
                        <div class="row-actions">
                            <a href="#" onclick="event_edit_dialog(<?= $id ?>)">Edit</a> |
                            <a href="#" onclick="event_delete(<?= $id ?>)">Delete</a> |
                            <a href="#" onclick="event_view(<?= $id ?>)">View</a>
                        </div>
                    </td>
                    <td><span id="event-location-<?= $id ?>"><?= $event["location"] ?></span></td>
		    <td><span id="event-description-<?=$id ?>"><?= $event["description"] ?></span></td>
		    <td><span id="event-shipping-address-<?=$id ?>"><?= $event["shipping_address"] ?></span></td>
		    <td><span id="event-geocode-<?=$id ?>"><?= $event["geocode"] ?></span></td>
                    <td class="date-column"><span id="event-start-date-<?= $id ?>"><?= $event["start_date"] ?></span></td>
                    <td class="date-column"><span id="event-end-date-<?= $id ?>"><?= $event["end_date"] ?></span></td>
                    <td><span id="event-active-<?=$id ?>"><?= $event["active_flag"] ? "Yes" : "No" ?></span></td>
                </tr>
<?php
    }
?>
            </tbody>
            </table>
       
<?php
}


?>
